<template>
	<div class="backpack" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="背包记录"></back-header>
		<div class="backpack-warp">
			<div class="backpacklist">
				<app-loading v-if="!backpackList"></app-loading>
				<div v-else-if="backpackList.length == 0" style="text-align: center;padding:100px 0;font-size:16px;color:#555;">暂无背包记录</div>
				<div v-else class="item flex" v-for="item in backpackList">
					<img :src="item.cover" width="50px;" heoght="50px;">
					<div class="info"><p class="name text-beyond">{{item.title}}<span>兑换{{item.to_user_price}}金币</span></p><p class="time text-beyond">{{item.create_at}}</p></div>
					<span class="align-left">
						<input type="checkbox" :id=" 'toy'+item.backpack_id " class="icon-check" name="ids[]" :value="item" v-model="checkedNames">
					</span>
				</div>
			</div>
			<div v-if="backpackList && backpackList.length > 0">
				<div style="text-align:center;padding:5px 0;font-size:14px;color:#ff7979;">一个只能兑换金币，两个才能邮寄</div>
				<button type="button" class="btn btn-green" style="margin-top:0;" @click="operation('exchange')">兑换金币</button>
				<button type="button" class="btn btn-yellow" @click="operation('order')" style="color:#545454;">提交订单</button>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"appBackpack",
		components:{backHeader,appLoading},
		data(){
			return {
				backpackList:"",
				checkedNames:[]
			}
		},
		mounted(){
			this.getAllbackpack();
		},
		watch:{
			checkedNames(){
				console.log(this.checkedNames);
			}
		},
		methods:{
			getAllbackpack(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/Backpack/getAll`,{token:this.$store.state.userInfo.token,page:1}).then((response) => {
		              console.log(response)
		              this.backpackList = response.data.list;
		  		 })
			},
			operation(type){
				switch(type){
					case 'order':
						if(this.checkedNames.length < 2 ){
							alert("请选择至少两个娃娃哟")
							return;
						}
						this.$store.state.backpack = this.checkedNames;
						this.$router.push({path:'/Orderdetails'});
					break;
					case 'exchange':
						this.$store.state.backpack = this.checkedNames;
						this.$router.push({path:'/Changecoins'});
					break;
					default:
						alert("操作错误")
					break;

				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.backpack{
		width: 100%;
		height:100%;
		overflow: hidden;
	}
	.btn {
	    width: 92%;
	    display: block;
	    background: 0 0;
	    border: none;
	    height:40px;
	    outline: 0;
	    font-size: 16px;
	    margin: 15px auto;
	    border-radius: 6px;
	    color: #fff
	}
	.btn-green{
		background: #0cd495;
	}
	.btn-yellow{
		background: #feda2c;
	}
	.backpack-warp{
		width: 100%;
	    position: relative;
	    height:100%;
	    overflow-y: auto
	}
	.backpacklist{
		height: -webkit-calc(100% - 150px);
		height: calc(100% - 150px);
	    overflow-y: auto;
	    width: 100%;
	    margin: 0 auto;
	    border-radius: 5px;
	    background: #fff;
	    padding:0 15px;
	    .item{
	    	padding: 10px 0;
    		border-bottom: 1px solid #f2f2f2;
    		img{
    			width:60px;
    			border-radius: 5px;
    			margin-right:10px;
    		}
    		.info{
    			width:230px;
    			.name{
    				width: 100%;
				    color: #555;
				    font-size: 14px;
				    line-height:25px;
				    span{
				    	float: right;
					    margin-right: 15px;
					    color: #9b9b9b
				    }
    			}
    		}
    		.time{
    			width: 100%;
			    color: #9b9b9b;
			    font-size: 12px;
			    line-height: 20px;
    		}
    		.icon-check {
			    width: 15px;
			    height: 15px;
			    border: 1px solid #a6a5a7;
			    background: #fff;
			    -webkit-border-radius: 100%;
			    -moz-border-radius: 100%;
			    border-radius: 50%;
			    outline: 0;
			    -webkit-appearance: none;
			}
			.icon-check:checked {
			    width:15px;
			    height:15px;
			    border: none;
			    background: url(../assets/images/xuanzhong.png) no-repeat center;
			    background-size: 100%;
			    -webkit-border-radius: 100%;
			    -moz-border-radius: 100%;
			    border-radius: 100%;
			    outline: 0;
			}

	    }

	}
</style>